<template>
  <div class="form-table-index mobile-t-sub-form">
    <div
      v-for="(valueItem, index) in value"
      class="card"
      :key="index"
    >
      <van-cell
        class="block-title"
        :title="$t('formgen.subform.seqNo') + '：' + (index + 1)"
      >
        <template #default>
          <el-button
            @click="updateDomain(index, valueItem)"
            link
            type="primary"
          >
            {{ $t("formgen.subform.update") }}
          </el-button>
          <el-button
            @click="copyDomain(valueItem)"
            link
            type="primary"
          >
            {{ $t("formgen.subform.copy") }}
          </el-button>
          <el-button
            @click="removeDomain(index)"
            link
            type="primary"
          >
            {{ $t("formgen.subform.delete") }}
          </el-button>
        </template>
      </van-cell>
      <van-cell-group :border="false">
        <van-cell
          v-for="option in item.childList"
          :title="getTableColumnLabel(option)"
          :key="option.vModel"
          :value="showText(valueItem, option.vModel, option)"
        ></van-cell>
      </van-cell-group>
    </div>

    <el-button
      type="primary"
      size="default"
      class="button"
      :disabled="disabled"
      @click="addDomain"
      icon="ele-Plus"
      v-if="!checkRowCountMax()"
    >
      {{ $t("formgen.subform.add") }}
    </el-button>
    <AddOrUpdateMobile
      v-if="addOrUpdateVisible"
      ref="addOrUpdateRef"
      :fields="item.childList"
      @submit="handleFormSubmit"
    />
  </div>
</template>

<script setup lang="ts" name="MobileTSubForm">
import "vant/lib/cell/style";
import "vant/lib/cell-group/style";
import { Cell as VanCell, CellGroup as VanCellGroup } from "vant";
import AddOrUpdateMobile from "./AddOrUpdateMobile.vue";
import { useSubForm } from "@/views/formgen/components/FormItem/SubForm/useSubForm";

const props = defineProps({
  models: {
    type: Object,
    default: () => {}
  },
  value: {
    type: Array,
    default: () => []
  },
  item: {
    type: Object,
    default: () => {}
  }
});

const {
  disabled,
  addOrUpdateRef,
  addOrUpdateVisible,
  showText,
  getTableColumnLabel,
  removeDomain,
  updateDomain,
  copyDomain,
  addDomain,
  handleFormSubmit,
  checkRowCountMax
} = useSubForm(props);
</script>

<style lang="scss">
.mobile-t-sub-form {
  .card {
    background-color: #fafafa;

    .van-cell-group {
      background-color: transparent;
      margin-bottom: 10px;
    }

    .van-cell {
      background: transparent;
    }

    .block-title {
      .van-cell__title {
        font-weight: bold;
      }
    }
  }

  .el-button--text {
    padding: 0;
  }
}
</style>
